<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标移入移出</title>
</head>
<style>
    .out,
    .in {
        width: 200px;
        height: 200px;
        float: left;
    }

    .out {
        position: relative;
        background: blueviolet;
        overflow: hidden;
        margin: 10px;
    }

    .in {
        position: absolute;
        background: #ccc;
        top: 100%;
        left: 100%;
    }

    .box {
        width: 300px;
        height: 200px;
        margin: 10px auto;
        border: 1px solid #ccc;
        position: relative;
        overflow: hidden;
        display: inline-block;
    }

    .content {
        position: absolute;
        z-index: 2;
        background-color: lightcoral;
        width: 100%;
        height: 100%;
        left: -100%;
        top: -100%;
        line-height: 198px;
        text-align: center;
        color: #fff;
        font-size: 70px;
    }

    .content.trans {
        transition: all .2s;
        backface-visibility: hidden;
    }


    .clear {
        clear: both;
    }
    #demo ul{
        width: 30%;
        display: inline-block;
    }
    #demo ul li{
        list-style: none;
    }
</style>
<body>
    <header>
        <h1>鼠标移入移出效果</h1>
        <ul>
            <li>包含原生以及jQ方法。 IE8-没效果，IE9无动画</li>
        </ul>
    </header>
    <hr>
    <section>
        <h3>原生</h3>
        <hr>
        <li>使用方法</li>
        <hr>
        <code style="float:left;width:340px;">
                var OUT = document.getElementsByClassName('out');<br>
                var IN = document.getElementsByClassName('in');<br>
                for(var i = 0;i<OUT.length;i++){<br>
                    var options = {<br>
                        targetElement:OUT[i],<br>
                        animationElement:IN[i],<br>
                        speed:"0.2s"<br>
                    }<br>
                    var move = new HoverAction(options)<br>
                    move.addEvent()<br>
                }<br>
        </code>
        <div id="demo" style="float:right;">
            <div class="out">waimian
                <div class="in">limian</div>
            </div>
            <div class="out">waimian
                <div class="in">limian</div>
            </div>
            <div class="out">waimian
                <div class="in">limian</div>
            </div>
            <div class="out">waimian
                <div class="in">limian</div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </section>
    <hr>
    <section>
        <div id="demo">
            <h3>JQ</h3>
            <hr>
            <li>JQ使用对css有要求</li>
            <hr>
            <ul style="float:left;">
                <li>html</li>
                <hr>
                <code>
                    &lt;div class="box"&gt;<br>
                    &lt;div class="content"&gt;1&lt;/div&gt;<br>
                    &lt;/div&gt;<br>
                    &lt;div class="box"&gt;<br>
                    &lt;div class="content"&gt;1&lt;/div&gt;<br>
                    &lt;/div&gt;
                </code>
            </ul>
            <ul style="float:left;">
                <li>css</li>
                <hr>
                <code>
                        .box {<br>
                            width: 300px;height: 200px;margin: 10px auto;<br>
                            border: 1px solid #ccc;position: relative;<br>
                            overflow: hidden;display: inline-block;<br>
                        }<br>
                        .content {<br>
                            position: absolute;z-index: 2;background-color: lightcoral;<br>
                            width: 100%;height: 100%;<br>
                            left: -100%;top: -100%;font-size: 70px;<br>
                            line-height: 198px;text-align: center;color: #fff;<br>
                        }<br>
                        .content.trans {<br>
                            transition: all .2s;<br>
                            backface-visibility: hidden;<br>
                        }<br>
                </code>
            </ul>
            <ul style="float:left;">
                <li>js</li>
                <hr>
                <code>
                        var DIR_POS = {<br>
                            left: {<br>
                                top: '0',left: '-100%'<br>
                            },right: {<br>
                                top: '0',left: '100%'<br>
                            },bottom: {<br>
                                top: '100%',left: '0'<br>
                            },top: {<br>
                                top: '-100%',left: '0'<br>
                            }<br>
                        };<br>
                    
                        $('.box').each(function () {<br>
                            new MouseDirection(this, {<br>
                                enter: function ($element, dir) {<br>
                                    //每次进入前先把.trans类移除掉，以免后面调整位置的时候也产生过渡效果<br>
                                    var $content = $element.find('.content').removeClass('trans');<br>
                                    //调整位置<br>
                                    $content.css(DIR_POS[dir]);<br>
                                    //reflow<br>
                                    $content[0].offsetWidth;<br>
                                    //启用过渡<br>
                                    $content.addClass('trans');<br>
                                    //滑入<br>
                                    $content.css({left: '0', top: '0'});<br>
                                },<br>
                                leave: function ($element, dir) {<br>
                                    $element.find('.content').css(DIR_POS[dir]);<br>
                                }<br>
                            });<br>
                        });<br>
                </code>
            </ul>
            <div class="clear"></div>
            <hr>
            <div class="box">
                <div class="content">1</div>
            </div>
            <div class="box">
                <div class="content">2</div>
            </div>
            <div class="box">
                <div class="content">3</div>
            </div>
            <div class="box">
                <div class="content">4</div>
            </div>
            <div class="clear"></div>
        </div>
    </section>

</body>

<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script src="mousedirection.js"></script>
<script src="HoverAction.js"></script>
<script>
        var DIR_POS = {
        left: {
            top: '0',
            left: '-100%'
        },
        right: {
            top: '0',
            left: '100%'
        },
        bottom: {
            top: '100%',
            left: '0'
        },
        top: {
            top: '-100%',
            left: '0'
        }
    };

    $('.box').each(function () {
        new MouseDirection(this, {
            enter: function ($element, dir) {
                //每次进入前先把.trans类移除掉，以免后面调整位置的时候也产生过渡效果
                var $content = $element.find('.content').removeClass('trans');
                //调整位置
                $content.css(DIR_POS[dir]);
                //reflow
                $content[0].offsetWidth;
                //启用过渡
                $content.addClass('trans');
                //滑入
                $content.css({left: '0', top: '0'});
            },
            leave: function ($element, dir) {
                $element.find('.content').css(DIR_POS[dir]);
            }
        });
    });
</script>
<script>
    //使用方法    
    var OUT = document.getElementsByClassName('out');
    var IN = document.getElementsByClassName('in');
    for(var i = 0;i<OUT.length;i++){
        var options = {
            targetElement:OUT[i],
            animationElement:IN[i],
            speed:"0.2s"
        }
        var move = new HoverAction(options)
        move.addEvent()
    }
    // var OUT = $('.out');
    // var IN = $(".in");
    // for(var i = 0;i<OUT.length;i++){
    //     var options = {
    //         targetElement:OUT[i],
    //         animationElement:IN[i],
    //         speed:"0.2s"
    //     }
    //     var move = new HoverAction(options)
    //     move.addEvent()
    // }
</script>
</html>